<template>
  <div  class="menu-right" ref="itemList">
      <ul>
        <li v-for="(ita,index) of tegmenus" :key="index" class="cate">
        <h4 class="cate-title">-{{ita.cat_name}}-</h4>
          <ul class="cate-item">
            <li v-for="(itb,index) in ita.children" :key="index">
              <router-link :to="{name:'goods_list',params:{category_id:itb.cat_id}}" class="cate-item-wrapper">
                <div class="cate-item-img">
                  <img :src="itb.cat_icon" alt="">
                </div>
                <span>{{itb.cat_name}}</span>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CategoryRight',
  props: {
    tegmenus: {
      type: Array
    },
    tegIndex: {
      type: Number
    }
  },
  methods: {
    getBscoll () {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.itemList, {
        /**
       * 1 滚动的时候会派发scroll事件，会截流。
       * 2 滚动的时候实时派发scroll事件，不会截流。
       * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
       */
          probeType: {
            type: Number,
            default: 1
          },
          /**
       * 点击列表是否派发click事件
       */
          click: {
            type: Boolean,
            default: true
          },
          startX: 0,
          scrollX: true
        })
      })
    }
  },
  mounted () {
    this.getBscoll()
    setTimeout(() => {
      this.getBscoll()
    }, 20)
  }
}
</script>

<style lang="scss" scoped>
.menu-right {
  flex: 1;
  .cate{
    height: 100%;
    // overflow: hidden;
    .cate-title{
        margin: 0;
        text-align: center;
        font-size: 16px;
        color: #333;
        font-weight: bold;
        padding: 10px;
    }
    .cate-item{
      padding: 7px 10px 10px;
      display: flex;
      overflow: hidden;
      flex-flow: row wrap;
      li {
        width: 33.3%;
        .cate-item-wrapper{
          .cate-item-img {
            width: 100%;
            img{
              width: 5.125rem;
              height: 5rem;
            }
          }
          span{
            display: inline-block;
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
